<script lang="ts" setup>

import usePermissionStore  from '@/stores/modules/permission'

const permissionRouter = usePermissionStore

</script>

<template>
  <div class="vaw-header-layout">
    <div class="logo-wrapper">
      <Logo :always-show="true"/>
    </div>
    <div style="flex: 1; overflow: hidden; padding: 0 10px">
      <horizontal-scroller-menu :routes="permissionRouter().getPermissionSideBar"/>
    </div>
    <div class="avatar-wrapper">
      <v-a-w-avatar/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.vaw-header-layout {
  height: 48px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-color);

  .logo-wrapper {
    width: calc(var(--menu-width) / 3 * 2);
  }

  .menu-wrapper {
    flex: 1;
    overflow: hidden;
  }

  .right-wrapper {
    height: 100%;
  }

  .avatar-wrapper {
    padding-right: 15px;
  }
}
</style>